import React from 'react';

import Fetch from '../../common/Fetch';

import moment from 'moment';

import {Link} from 'react-router';

import {Icon} from 'amazeui-react';

class BlogList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            page:this.props.page || 1,
            number:this.props.number || 10,
            category:this.props.category || '',
            last_id:null,
            data:[],
            load:true
        }
    }

    componentDidMount() {
        Fetch('/res/blog/query_blog',{
            page:this.state.page,
            number:this.state.number,
            ctg_id:this.state.category,
            last_id:this.state.last_id
        },(res)=>{
            if (res.status) {
                this.setState({
                    load:false,
                    data:res.data
                })
            }
        });
    }

    render() {
        if (this.state.load) {
            return this.renderLoad();
        }

        if (!this.state.data || this.state.data.length <= 0) {
            return this.renderNotData();
        }
        return (
            <div className="blog-list">
                {this.state.data.map((item)=>{
                    return this.renderRow(item);
                })}
                <div className="blog-page">
                    加载更多
                </div>
            </div>
        );
    }

    renderLoad() {
        return (
            <div className="blog-loading">
                <Icon size="lg" spin fw icon="spinner"/>
                <span>正在加载</span>
            </div>
        );
    }

    renderNotData() {
        return (
            <div className="blog-list">
                <div className="blog-no-list">没有文章</div>
            </div>
        );
    }

    renderRow(item) {
        return (
            <div className="blog-row">
                <div className="blog-title">{item.blog_title}</div>
                <div className="blog-content markdown-body"
                     dangerouslySetInnerHTML={{__html:item.blog_summary || ''}}>
                </div>
                <div className="blog-foot">
                    <div className="am-u-sm-6">
                        <Icon icon="sign-out" fw/>
                        {'\u00a0'}
                        <Link to={"/blog/"+item.blog_id}>点击阅读全文</Link>
                    </div>
                    <div className="date am-u-sm-6">
                        <Icon icon="clock-o" fw/>
                        {'\u00a0'}
                        {moment.unix(item.created_date).fromNow()}
                    </div>
                </div>
            </div>
        );
    }
}

BlogList.contextTypes = {
    router: React.PropTypes.object
};

export default BlogList;